<template>
  <!-- <div class="content-box">
    <common-header :title="title"></common-header> -->
    <div class="page-content">
      <van-field
        v-model="userName"
        type="text"
        clearable
        label="开户人姓名"
        placeholder="请输入开户人姓名"
        required
        error-message-align="right"
        :error-message="userNameMessage"
      />
      <van-field
        v-model="bankName"
        clearable
        type="text"
        label="所属银行"
        placeholder="请输入所属银行"
        required
        error-message-align="right"
        :error-message="bankNameMessage"
      />
      <van-field
        v-model="bankCardNum"
        clearable
        type="number"
        label="银行卡号"
        placeholder="请输入银行卡号"
        required
        error-message-align="right"
        :error-message="bankCardNumMessage"
      />
      <van-field
        v-model="bankPosition"
        type="text"
        clearable
        label="开户网点"
        placeholder="请输入开户网点"
        required
        error-message-align="right"
        :error-message="bankPositionMessage"
      />

      <div class="btnPay" @click="finish()">完善信息</div>
      <div class="care">您绑定银行卡的开户名必须与您认证的实名一致，否则将无法成功提现。</div>
      <commonFooter></commonFooter>
    </div>
  <!-- </div> -->
</template>
<script>
import { commonHeader, commonFooter } from "common";
import { patternBank } from "@/utils/regRex";
import { createNamespacedHelpers } from "vuex";
let { mapActions } = createNamespacedHelpers("user");
export default {
  name: "addBankcard",
  components: {
    commonHeader,
    commonFooter
  },
  methods: {
    ...mapActions(["SetBank"]),
    finish() {
      let _this = this;
      this.userNameMessage = "";
      this.bankNameMessage = "";
      this.bankCardNumMessage = "";
      this.bankPositionMessage = "";
      if (!this.userName) {
        this.userNameMessage = "开户人姓名不能为空";
      }
      if (!this.bankName) {
        this.bankNameMessage = "开户银行不能为空";
      }
      if (!this.bankPosition) {
        this.bankPositionMessage = "开户网点不能为空";
      }
      if (!this.bankCardNum) {
        this.bankCardNumMessage = "银行卡号不能为空";
      } else if (!patternBank.test(this.bankCardNum)) {
        this.bankCardNumMessage = "请输入正确的银行卡号";
      } else if (this.userName && this.bankName && this.bankPosition) {
        this.$toast({
          message: "添加银行卡成功",
          duration: 500,
          onClose: function() {
            _this.SetBank().then(res => {
              if (_this.$route.query.redirect) {
                _this.$router.push({ path: _this.$route.query.redirect});
              } else {
                _this.$router.push({
                  path: "/user/myBankcard"
                });
              }
            });
          }
        });
      }
    }
  },
  data() {
    return {
      title: "新增银行卡",
      userName: "",
      userNameMessage: "",
      bankName: "",
      bankNameMessage: "",
      bankCardNum: "",
      bankCardNumMessage: "",
      bankPosition: "",
      bankPositionMessage: ""
    };
  }
};
</script>
<style lang="less" scoped>
@import "~styles/variable.less";
</style>